<!--
** 发起节点---更多
 -->
<template>
  <div>
    <a-form layout="vertical">
      <a-form-item label="操作按钮">
        <template v-for="item in props.node.config.operationButton" :key="item.buttonId">
          <div class="draggable-option">
            <div class="draggable-option-list list-rule">
              <div class="draggable-option-item draggable-option-item-rule">
                <span>{{ item.buttonName }}</span>
                <a-switch style="float: right" v-model:checked="item.enabled" checked-children="开"
                  un-checked-children="关" />
              </div>
              <div class="draggable-option-item draggable-option-item-rule">
                <span>按钮名称</span>
                <a-input :disabled="!item.enabled" v-model:value="item.param.type"></a-input>
              </div>
            </div>
          </div>
        </template>
      </a-form-item>
      <a-form-item label="打印设置">
        <div class="draggable-option-title">
          <PlusOutlined :style="{ color: 'rgb(75, 100, 241)' }" />
          <a-button type="link" size="small" @click="addPrintSend">添加按钮</a-button>
        </div>
        <Draggable tag="ul" item-key="index" ghostClass="ghost" handle=".drag-item" :group="{ name: 'options' }"
          :list="printSetList">
          <template #item="{ element, index }">
            <div class="draggable-option">
              <a-row>
                <CloseCircleFilled @click="deleteRe(index)" />
                <a-col :span="1" className="drag-item"><span class="iconfont up-Sort drag-item">
                    <UnorderedListOutlined />

                  </span></a-col>
                <a-col :span="21" class="draggable-option-list">
                  <div class="draggable-option-item">
                    <div>
                      <span class="draggable-option-item-label">按钮名称</span>
                      <a-input v-model:value="element.buttonName" placeholder="请输入按钮名称" style="width: 66%"
                        :getPopupContainer="(triggerNode) => triggerNode.parentNode"></a-input>
                    </div>
                    <div style="margin-top: 15px;">
                      <span class="draggable-option-item-label">打印参数</span>
                      <a-select v-model:value="element.param.value" placeholder="请选择打印参数" style="width: 66%"
                        :options="options" :filter-option="filterOption"
                        :getPopupContainer="(triggerNode) => triggerNode.parentNode"></a-select>
                    </div>
                  </div>
                </a-col>
              </a-row>
            </div>
          </template>
        </Draggable>
      </a-form-item>
      <a-form-item label="抄送设置">
        <a-checkbox v-model:checked="props.node.config.copySend.enabled">流转至下一节点后抄送</a-checkbox>
        <a-button block class="ant-design-button" @click="showModal"
          v-if="props.node.config.copySend.enabled">设置抄送对象</a-button>
      </a-form-item>
      <a-form-item label="对外设置">
        <a-checkbox v-model:checked="props.node.config.label.enabled">对外展示</a-checkbox>
        <br />
        <template v-if="props.node.config.label.enabled">
          <a-select v-model:value="props.node.config.label.type" show-search :options="options"
            :filter-option="filterOption"></a-select>
          <div>
            <span>对外名称</span><a-input v-model:value="props.node.config.label.value" style="margin: 10px 0 0 5px;"
              placeholder="请输入对外名称"></a-input>
          </div>
        </template>
      </a-form-item>
    </a-form>

    <!-- 弹窗 -->
    <a-modal v-model:visible="visible" width="1000px" title="选择员工" @ok="handleOk">
      <ChangeStaffDialog></ChangeStaffDialog>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, defineProps, watch } from "vue";
import { PlusOutlined, CloseCircleFilled, UnorderedListOutlined } from "@ant-design/icons-vue";
import ChangeStaffDialog from "@/components/flowDesign/flowCommon/compoents/dialog/ChangeStaffDialog.vue";
import Draggable from "vuedraggable";
const props = defineProps({
  node: {
    type: Object
  }
});

console.log("Inita.vue中node节点属性", props.node);
const checked = ref(false);
const value = ref("提交");
/**
 * 弹窗
 * */
const visible = ref(false);
const showModal = () => {
  visible.value = true;
};
const handleOk = (e) => {
  console.log(e);
  visible.value = false;
};
// 下拉选框
const options = ref([
  {
    label: "自定义",
    value: "1"
  },
  {
    label: "与节点名称相同",
    value: "0"
  }
])
const filterOption = (input, option) => {
  return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};
/**
 * 添加
 * */
const printSetList = ref(props.node.config.printButton)
const addPrintSend = () => {
  console.log("添加打印设置");
  printSetList.value.push({
    buttonId: "printNotiForm", //按钮ID
    buttonName: "", //按钮名称
    buttonType: "printNotiForm", //按钮类型
    enabled: true, //按钮是否可用
    param: {
      type: "printNotiForm",
      value: "" //打印参数
    }
  })
}
const deleteRe = (index) => {
  printSetList.value.splice(index, 1)
}
</script>

<style lang="less" scoped>
.ant-input {
  width: 80%;
}

.ant-design-button {
  width: 100%;
  color: rgb(75, 100, 241);
  border-color: rgb(75, 100, 241);
  margin: 5px 0;
}
</style>
